<template>
  <div>
    <div class="my-page-header">
      <button
        v-if="!isAuthorized"
        class="common-class click-me"
        open-type="getUserInfo"
        plain
        @getuserinfo="onGotUserInfo"
      >click</button>
      <div v-if="isAuthorized" class="common-class avatar-user">
        <img class="avatar-img" :src="userInfo.avatarUrl" alt="头像">
        <text class="nick-name">{{ userInfo.nickName }}</text>
      </div>
      <div class="my-page-ps">
        <div class="my-page-ps-content" @click="handleAboutUs">
          <i class="fa fa-info-circle ps-content-text"></i>
          <text>关于我</text>
        </div>
        <div class="my-page-ps-content">
          <text class="ps-content-text">{{ likeBookCount }}</text>
          <text>我的书单</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../../utils/request'
export default {
  data() {
    return {
      // 是否授权
      isAuthorized: false,
      userInfo: {},
      likeBookCount: 0
    };
  },
  onLoad() {
    // 初始化时，查看用户是否授权
    wx.getSetting({
      success: result => {
        // 必须使用箭头函数，否则拿不到this
        const isAuthorized = result.authSetting["scope.userInfo"];
        this.isAuthorized = isAuthorized;
        if (isAuthorized) {
          // 授权了就通过getUserInfo获取用户信息
          wx.getUserInfo({
            success: result => {
              // 必须使用箭头函数，否则拿不到this
              const { userInfo } = result;
              this.userInfo = userInfo;
            }
          })
        }
      }
    });
    this.getLikeBookCount()
  },
  methods: {
    getLikeBookCount() {
      request({
        url: 'book/favor/count'
      }).then((result) => {
        const { count } = result
        this.likeBookCount = count
      })
    },
    onGotUserInfo(e) {
      const { userInfo } = e.mp.detail;
      if (userInfo) {
        this.userInfo = userInfo;
        this.isAuthorized = true;
        return;
      }
      this.isAuthorized = false;
    },
    handleAboutUs() {
      wx.navigateTo({
        url: "/pages/about-us/main"
      });
    }
  }
};
</script>

<style scoped>
.my-page-header {
  position: relative;
  background: url("//cs-static-assets.oss-cn-beijing.aliyuncs.com/jiudao_miniapp/my_page_header.png");
  background-origin: center center;
  background-size: 100% 100%;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.common-class {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 1px solid #eee;
}
.click-me {
  margin-top: 50rpx;
  text-align: center;
  line-height: 120rpx;
  font-size: 24rpx;
  background-color: #fff;
  color: #000;
}
.avatar-user {
  margin-top: 20rpx;
  text-align: center;
}
.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.nick-name {
  font-size: 24rpx;
}
.my-page-ps {
  position: absolute;
  bottom: 0;
  /* absolute时，width会失效，所以需要重新设置width */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #bbb;
  background-color: #fff;
}
.my-page-ps-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ps-content-text {
  color: #000;
}
</style>